<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in categoryList"
            :key="item.id"
            :label="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group></el-form-item
      >

      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </el-form-item>
    </el-form>

    <!-- 引入富文本框 -->
    <VueEditor v-model="content" :editorToolbar="customBar" />
    {{ content }}
    <!-- 这个上传组件， 将上传的请求发送部分也封装起来了， 我已不会经过 axios
    需要在这里直接给上传的属性， url 就是 action 请求头是 headers  属性
    action:上传的地址：
    on-remove	文件列表移除文件时的钩子（file，fileList）
    on-success	文件上传成功时的钩子（response（响应），file，fileList）
     :limit="3":允许上传的最大个数
       :action="'$axios.defaults.baseURL' + '/upload'"***不要加括号！！
    -->
    <el-upload
      :action="$axios.defaults.baseURL + '/upload'"
      :headers="{
        Authorization: token,
      }"
      :on-success="coverSuccess"
      :on-remove="coverRemove"
      list-type="picture-card"
      :limit="3"
    >
      <!-- 中间的+加号的意思 -->
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor,
  },
  watch: {
    checkList() {
      this.form.categories = this.checkList.map((num) => {
        return {
          id: num,
        };
      });
    },
  },
  data() {
    return {
      token: localStorage.getItem("token"),
      content: "",
      customBar: [
        ["bold", "italic", "underline"],
        [({ list: "ordered" }, { list: "bullet" })],
        ["img", "code-block"],
      ],
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
      checkList: [],
      categoryList: [],
    };
  },
  created() {
    this.$axios({
      url: "/category",
    }).then((res) => {
      res.data.data.splice(0, 2);
      this.categoryList = res.data.data;
    });
  },
  methods: {
    // 上传成功时：
    coverSuccess(res, file, fileList) {
      console.log(res);
      // 文件上传成功
    },
    coverRemove(file, fileList) {
      console.log(file);
    },
    onSubmit() {
      console.log(this.form);
    },
  },
};
</script>

<style>
</style>